<ons-page>
    <ons-toolbar>
        <div class="left">
            <ons-back-button>返回</ons-back-button>
        </div>
        <div class="center">Carousel 轮播</div>
    </ons-toolbar>

    <div style="padding: 20px;">
        <h3>基础轮播</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-carousel id="carousel1" swipeable auto-scroll overscrollable>
                    <ons-carousel-item style="background-color: #4a90e2;">
                        <div style="text-align: center; padding: 80px 20px; color: white;">
                            <h2>第 1 页</h2>
                            <p>这是第一个轮播项</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item style="background-color: #50c878;">
                        <div style="text-align: center; padding: 80px 20px; color: white;">
                            <h2>第 2 页</h2>
                            <p>这是第二个轮播项</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item style="background-color: #ff6b6b;">
                        <div style="text-align: center; padding: 80px 20px; color: white;">
                            <h2>第 3 页</h2>
                            <p>这是第三个轮播项</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item style="background-color: #ffa500;">
                        <div style="text-align: center; padding: 80px 20px; color: white;">
                            <h2>第 4 页</h2>
                            <p>这是第四个轮播项</p>
                        </div>
                    </ons-carousel-item>
                </ons-carousel>
            </div>
            <div class="code-actions" onclick="toggleCode('carousel1-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-carousel1-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-carousel1-code" onclick="event.stopPropagation(); copyCode('carousel1-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-carousel1-code">
                <pre><code id="code-content-carousel1-code">&lt;ons-carousel id="carousel1" swipeable auto-scroll overscrollable&gt;
    &lt;ons-carousel-item style="background-color: #4a90e2;"&gt;
        &lt;div style="text-align: center; padding: 80px 20px; color: white;"&gt;
            &lt;h2&gt;第 1 页&lt;/h2&gt;
            &lt;p&gt;这是第一个轮播项&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item style="background-color: #50c878;"&gt;
        &lt;div style="text-align: center; padding: 80px 20px; color: white;"&gt;
            &lt;h2&gt;第 2 页&lt;/h2&gt;
            &lt;p&gt;这是第二个轮播项&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item style="background-color: #ff6b6b;"&gt;
        &lt;div style="text-align: center; padding: 80px 20px; color: white;"&gt;
            &lt;h2&gt;第 3 页&lt;/h2&gt;
            &lt;p&gt;这是第三个轮播项&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item style="background-color: #ffa500;"&gt;
        &lt;div style="text-align: center; padding: 80px 20px; color: white;"&gt;
            &lt;h2&gt;第 4 页&lt;/h2&gt;
            &lt;p&gt;这是第四个轮播项&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
&lt;/ons-carousel&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带图片的轮播</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-carousel id="carousel2" swipeable auto-scroll>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-image" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px;">图片 1</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #50c878 0%, #3da35d 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-image" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px;">图片 2</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-image" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px;">图片 3</p>
                        </div>
                    </ons-carousel-item>
                </ons-carousel>
            </div>
            <div class="code-actions" onclick="toggleCode('carousel2-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-carousel2-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-carousel2-code" onclick="event.stopPropagation(); copyCode('carousel2-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-carousel2-code">
                <pre><code id="code-content-carousel2-code">&lt;ons-carousel id="carousel2" swipeable auto-scroll&gt;
    &lt;ons-carousel-item&gt;
        &lt;div style="width: 100%; height: 200px; background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;"&gt;
            &lt;ons-icon icon="md-image" style="color: white; font-size: 60px;"&gt;&lt;/ons-icon&gt;
            &lt;p style="color: white; margin-top: 10px; font-size: 18px;"&gt;图片 1&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item&gt;
        &lt;div style="width: 100%; height: 200px; background: linear-gradient(135deg, #50c878 0%, #3da35d 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;"&gt;
            &lt;ons-icon icon="md-image" style="color: white; font-size: 60px;"&gt;&lt;/ons-icon&gt;
            &lt;p style="color: white; margin-top: 10px; font-size: 18px;"&gt;图片 2&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item&gt;
        &lt;div style="width: 100%; height: 200px; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;"&gt;
            &lt;ons-icon icon="md-image" style="color: white; font-size: 60px;"&gt;&lt;/ons-icon&gt;
            &lt;p style="color: white; margin-top: 10px; font-size: 18px;"&gt;图片 3&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
&lt;/ons-carousel&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">带指示器的轮播</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-carousel id="carousel3" swipeable auto-scroll>
                    <ons-carousel-item style="background-color: #e8f4f8;">
                        <div style="text-align: center; padding: 60px 20px;">
                            <ons-icon icon="md-home" size="60px" style="color: #4a90e2;"></ons-icon>
                            <h3 style="margin-top: 15px;">欢迎</h3>
                            <p style="color: #666;">欢迎使用我们的应用</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item style="background-color: #f0f8e8;">
                        <div style="text-align: center; padding: 60px 20px;">
                            <ons-icon icon="md-star" size="60px" style="color: #50c878;"></ons-icon>
                            <h3 style="margin-top: 15px;">功能</h3>
                            <p style="color: #666;">丰富的功能等你探索</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item style="background-color: #fff0f0;">
                        <div style="text-align: center; padding: 60px 20px;">
                            <ons-icon icon="md-favorite" size="60px" style="color: #ff6b6b;"></ons-icon>
                            <h3 style="margin-top: 15px;">体验</h3>
                            <p style="color: #666;">开始你的精彩体验</p>
                        </div>
                    </ons-carousel-item>
                </ons-carousel>
                <div style="text-align: center; margin-top: 10px;">
                    <span id="dot1" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #4a90e2; margin: 0 5px;"></span>
                    <span id="dot2" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; margin: 0 5px;"></span>
                    <span id="dot3" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; margin: 0 5px;"></span>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('carousel3-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-carousel3-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-carousel3-code" onclick="event.stopPropagation(); copyCode('carousel3-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-carousel3-code">
                <pre><code id="code-content-carousel3-code">&lt;!-- HTML --&gt;
&lt;ons-carousel id="carousel3" swipeable auto-scroll&gt;
    &lt;ons-carousel-item style="background-color: #e8f4f8;"&gt;
        &lt;div style="text-align: center; padding: 60px 20px;"&gt;
            &lt;ons-icon icon="md-home" size="60px" style="color: #4a90e2;"&gt;&lt;/ons-icon&gt;
            &lt;h3 style="margin-top: 15px;"&gt;欢迎&lt;/h3&gt;
            &lt;p style="color: #666;"&gt;欢迎使用我们的应用&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item style="background-color: #f0f8e8;"&gt;
        &lt;div style="text-align: center; padding: 60px 20px;"&gt;
            &lt;ons-icon icon="md-star" size="60px" style="color: #50c878;"&gt;&lt;/ons-icon&gt;
            &lt;h3 style="margin-top: 15px;"&gt;功能&lt;/h3&gt;
            &lt;p style="color: #666;"&gt;丰富的功能等你探索&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;ons-carousel-item style="background-color: #fff0f0;"&gt;
        &lt;div style="text-align: center; padding: 60px 20px;"&gt;
            &lt;ons-icon icon="md-favorite" size="60px" style="color: #ff6b6b;"&gt;&lt;/ons-icon&gt;
            &lt;h3 style="margin-top: 15px;"&gt;体验&lt;/h3&gt;
            &lt;p style="color: #666;"&gt;开始你的精彩体验&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
&lt;/ons-carousel&gt;
&lt;div style="text-align: center; margin-top: 10px;"&gt;
    &lt;span id="dot1" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #4a90e2; margin: 0 5px;"&gt;&lt;/span&gt;
    &lt;span id="dot2" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; margin: 0 5px;"&gt;&lt;/span&gt;
    &lt;span id="dot3" style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; margin: 0 5px;"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
var carousel3 = document.getElementById('carousel3');
if (carousel3) {
    carousel3.addEventListener('postchange', function(event) {
        var index = event.activeIndex;
        updateDots(index);
    });
}

function updateDots(activeIndex) {
    var dots = ['dot1', 'dot2', 'dot3'];
    dots.forEach(function(dotId, index) {
        var dot = document.getElementById(dotId);
        if (dot) {
            dot.style.backgroundColor = index === activeIndex ? '#4a90e2' : '#ddd';
        }
    });
}
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">控制按钮</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <div style="text-align: center; margin: 20px 0;">
                    <ons-button onclick="prevSlide()">上一页</ons-button>
                    <ons-button onclick="nextSlide()">下一页</ons-button>
                </div>
                <div style="text-align: center;">
                    <span>当前页: <span id="currentIndex">0</span></span>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('carousel-control-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-carousel-control-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-carousel-control-code" onclick="event.stopPropagation(); copyCode('carousel-control-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-carousel-control-code">
                <pre><code id="code-content-carousel-control-code">&lt;!-- HTML --&gt;
&lt;div style="text-align: center; margin: 20px 0;"&gt;
    &lt;ons-button onclick="prevSlide()"&gt;上一页&lt;/ons-button&gt;
    &lt;ons-button onclick="nextSlide()"&gt;下一页&lt;/ons-button&gt;
&lt;/div&gt;
&lt;div style="text-align: center;"&gt;
    &lt;span&gt;当前页: &lt;span id="currentIndex"&gt;0&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
function prevSlide() {
    var carousel = document.getElementById('carousel3');
    var current = carousel.getActiveIndex();
    if (current &gt; 0) {
        carousel.setActiveIndex(current - 1);
    }
}

function nextSlide() {
    var carousel = document.getElementById('carousel3');
    var current = carousel.getActiveIndex();
    var total = carousel.itemCount;
    if (current &lt; total - 1) {
        carousel.setActiveIndex(current + 1);
    }
}

// 监听轮播变化
carousel3.addEventListener('postchange', function(event) {
    document.getElementById('currentIndex').textContent = event.activeIndex;
});
&lt;/script&gt;</code></pre>
            </div>
        </div>

        <h3 style="margin-top: 30px;">自动轮播</h3>
        <div class="code-example-container">
            <div class="code-demo-area">
                <ons-carousel id="carouselAuto" swipeable auto-scroll>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-notifications" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px; font-weight: 600;">广告 1</p>
                            <p style="color: rgba(255,255,255,0.9); font-size: 14px;">自动播放中...</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-local-offer" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px; font-weight: 600;">广告 2</p>
                            <p style="color: rgba(255,255,255,0.9); font-size: 14px;">自动播放中...</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-card-giftcard" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px; font-weight: 600;">广告 3</p>
                            <p style="color: rgba(255,255,255,0.9); font-size: 14px;">自动播放中...</p>
                        </div>
                    </ons-carousel-item>
                    <ons-carousel-item>
                        <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;">
                            <ons-icon icon="md-check-circle" style="color: white; font-size: 60px;"></ons-icon>
                            <p style="color: white; margin-top: 10px; font-size: 18px; font-weight: 600;">广告 4</p>
                            <p style="color: rgba(255,255,255,0.9); font-size: 14px;">自动播放中...</p>
                        </div>
                    </ons-carousel-item>
                </ons-carousel>
                <div style="text-align: center; margin-top: 10px;">
                    <span id="autoIndicator" style="font-size: 14px; color: #666;">
                        <span id="autoDot1" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #667eea; margin: 0 4px;"></span>
                        <span id="autoDot2" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 4px;"></span>
                        <span id="autoDot3" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 4px;"></span>
                        <span id="autoDot4" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 4px;"></span>
                    </span>
                </div>
            </div>
            <div class="code-actions" onclick="toggleCode('carousel-auto-code')">
                <div class="code-actions-left">
                    <ons-icon id="icon-carousel-auto-code" icon="md-chevron-down"></ons-icon>
                    <span>查看代码</span>
                </div>
                <div class="code-actions-right">
                    <button class="code-action-btn" id="copy-btn-carousel-auto-code" onclick="event.stopPropagation(); copyCode('carousel-auto-code')">
                        <ons-icon icon="md-copy"></ons-icon>
                        <span class="btn-text">复制</span>
                    </button>
                </div>
            </div>
            <div class="code-display" id="code-carousel-auto-code">
                <pre><code id="code-content-carousel-auto-code">&lt;!-- HTML --&gt;
&lt;ons-carousel id="carouselAuto" swipeable auto-scroll&gt;
    &lt;ons-carousel-item&gt;
        &lt;div style="width: 100%; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; flex-direction: column;"&gt;
            &lt;ons-icon icon="md-notifications" style="color: white; font-size: 60px;"&gt;&lt;/ons-icon&gt;
            &lt;p style="color: white; margin-top: 10px; font-size: 18px; font-weight: 600;"&gt;广告 1&lt;/p&gt;
            &lt;p style="color: rgba(255,255,255,0.9); font-size: 14px;"&gt;自动播放中...&lt;/p&gt;
        &lt;/div&gt;
    &lt;/ons-carousel-item&gt;
    &lt;!-- 更多轮播项... --&gt;
&lt;/ons-carousel&gt;
&lt;div style="text-align: center; margin-top: 10px;"&gt;
    &lt;span id="autoDot1" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #667eea; margin: 0 4px;"&gt;&lt;/span&gt;
    &lt;span id="autoDot2" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 4px;"&gt;&lt;/span&gt;
    &lt;span id="autoDot3" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 4px;"&gt;&lt;/span&gt;
    &lt;span id="autoDot4" style="display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 4px;"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;!-- JavaScript --&gt;
&lt;script&gt;
var autoPlayTimer = null;

// 监听自动轮播变化
var carouselAuto = document.getElementById('carouselAuto');
if (carouselAuto) {
    carouselAuto.addEventListener('postchange', function(event) {
        var index = event.activeIndex;
        updateAutoDots(index);
    });
    
    // 启动自动播放
    startAutoPlay();
}

function updateAutoDots(activeIndex) {
    var dots = ['autoDot1', 'autoDot2', 'autoDot3', 'autoDot4'];
    dots.forEach(function(dotId, index) {
        var dot = document.getElementById(dotId);
        if (dot) {
            dot.style.backgroundColor = index === activeIndex ? '#667eea' : '#ddd';
        }
    });
}

function startAutoPlay() {
    if (autoPlayTimer) {
        clearInterval(autoPlayTimer);
    }
    
    autoPlayTimer = setInterval(function() {
        var carousel = document.getElementById('carouselAuto');
        if (carousel) {
            var current = carousel.getActiveIndex();
            var total = carousel.itemCount;
            var next = (current + 1) % total; // 循环播放
            carousel.setActiveIndex(next);
        }
    }, 3000); // 每3秒切换
}
&lt;/script&gt;</code></pre>
            </div>
        </div>
    </div>

    <script>
        var autoPlayTimer = null;

        document.addEventListener('init', function(event) {
            var page = event.target;
            
            // 监听轮播变化
            var carousel3 = document.getElementById('carousel3');
            if (carousel3) {
                carousel3.addEventListener('postchange', function(event) {
                    var index = event.activeIndex;
                    updateDots(index);
                    document.getElementById('currentIndex').textContent = index;
                });
            }

            // 监听自动轮播变化
            var carouselAuto = document.getElementById('carouselAuto');
            if (carouselAuto) {
                carouselAuto.addEventListener('postchange', function(event) {
                    var index = event.activeIndex;
                    updateAutoDots(index);
                });

                // 启动自动播放
                startAutoPlay();
            }
        });

        function updateDots(activeIndex) {
            var dots = ['dot1', 'dot2', 'dot3'];
            dots.forEach(function(dotId, index) {
                var dot = document.getElementById(dotId);
                if (dot) {
                    dot.style.backgroundColor = index === activeIndex ? '#4a90e2' : '#ddd';
                }
            });
        }

        function updateAutoDots(activeIndex) {
            var dots = ['autoDot1', 'autoDot2', 'autoDot3', 'autoDot4'];
            dots.forEach(function(dotId, index) {
                var dot = document.getElementById(dotId);
                if (dot) {
                    dot.style.backgroundColor = index === activeIndex ? '#667eea' : '#ddd';
                }
            });
        }

        function startAutoPlay() {
            if (autoPlayTimer) {
                clearInterval(autoPlayTimer);
            }
            
            autoPlayTimer = setInterval(function() {
                var carousel = document.getElementById('carouselAuto');
                if (carousel) {
                    var current = carousel.getActiveIndex();
                    var total = carousel.itemCount;
                    var next = (current + 1) % total; // 循环播放
                    carousel.setActiveIndex(next);
                }
            }, 3000); // 每3秒切换
        }

        function prevSlide() {
            var carousel = document.getElementById('carousel3');
            var current = carousel.getActiveIndex();
            if (current > 0) {
                carousel.setActiveIndex(current - 1);
            }
        }

        function nextSlide() {
            var carousel = document.getElementById('carousel3');
            var current = carousel.getActiveIndex();
            var total = carousel.itemCount;
            if (current < total - 1) {
                carousel.setActiveIndex(current + 1);
            }
        }
    </script>
    <script src="../js/code-display.js"></script>
</ons-page>
